:root {
  --form-grid-background: var(--theme-primary-020);
  --form-grid-background-hover: var(--theme-primary-020);
  --form-grid-background-focus: var(--theme-primary-020);
  --form-grid-background-disabled: var(--theme-primary-010);
  --form-grid-border: var(--theme-primary-030);
  --form-grid-border-hover-focus: var(--theme-primary-030);
  --form-grid-border-active: var(--theme-accent);
  --form-grid-border-checked: var(--theme-accent);
  --form-grid-border-disabled: var(--theme-primary-010);
}

.form-grid {
  background-color: hsl(var(--form-grid-background));
  padding: calc((var(--form-thumb-size) / 4) * 1em);
  display: inline-grid;
  gap: calc((var(--form-thumb-size) / 4) * 1em);
  overflow: hidden;
  transition: background-color var(--layout-transition-extra-fast);
}

.form-grid:hover {
  outline: none;
  background-color: hsl(var(--form-grid-background-hover));
}

.form-grid:focus,
.form-grid:focus-within {
  outline: none;
  background-color: hsl(var(--form-grid-background-focus));
}

.form-grid.disabled,
.form-grid.disabled:focus,
.form-grid.disabled:focus-within {
  background-color: hsl(var(--form-grid-background-disabled));
}

.form-grid-2x2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border-radius: calc(var(--theme-radius) * 0.01em);
  grid-template-areas:
    "cell-1 cell-2"
    "cell-3 cell-4";
}

.form-grid-3x3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-radius: calc(var(--theme-radius) * 0.01em);
  grid-template-areas:
    "cell-1 cell-2 cell-3"
    "cell-4 cell-5 cell-6"
    "cell-7 cell-8 cell-9";
}

.form-grid-3x1 {
  grid-template-columns: repeat(3, 1fr);
  border-radius: calc(var(--theme-radius) * 0.01em);
  grid-template-areas:
    "cell-1 cell-2 cell-3";
}

.form-grid-1x3 {
  grid-template-rows: repeat(3, 1fr);
  border-radius: calc(var(--theme-radius) * 0.01em);
  grid-template-areas:
    "cell-1"
    "cell-2"
    "cell-3";
}

.form-grid-3x3>*,
.form-grid-3x1>*,
.form-grid-1x3>* {
  grid-area: var(--form-grid-cell);
}

.form-grid .form-wrap {
  margin-top: 0;
  margin-bottom: 0;
}

.form-grid input[type="checkbox"]+label,
.form-grid input[type="radio"]+label {
  background-color: transparent;
  padding: 0;
  margin: 0;
  display: block;
  width: var(--form-thumb);
  height: var(--form-thumb);
  position: relative;
  transition: none;
  z-index: 1;
}

.form-grid input[type="checkbox"]:hover+label,
.form-grid input[type="checkbox"]:focus+label,
.form-grid input[type="radio"]:hover+label,
.form-grid input[type="radio"]:focus+label {
  box-shadow: none;
}

.form-grid input[type="checkbox"]+label .label-icon,
.form-grid input[type="radio"]+label .label-icon {
  margin-right: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-grid-3x3 {
  --grid-radius-offset: calc((var(--theme-radius) / 100) * 0.1em);
  --grid-radius-positive: calc(var(--grid-radius-offset) + -50%);
  --grid-radius-negative: calc((var(--grid-radius-offset) * -1) + -50%);
}

.form-grid-3x3 .form-wrap:nth-child(1) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(1) input[type="radio"]+label .label-icon {
  transform: translate(var(--grid-radius-positive), var(--grid-radius-positive));
}

.form-grid-3x3 .form-wrap:nth-child(2) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(2) input[type="radio"]+label .label-icon {
  transform: translate(-50%, var(--grid-radius-positive));
}

.form-grid-3x3 .form-wrap:nth-child(3) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(3) input[type="radio"]+label .label-icon {
  transform: translate(var(--grid-radius-negative), var(--grid-radius-positive));
}

.form-grid-3x3 .form-wrap:nth-child(4) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(4) input[type="radio"]+label .label-icon {
  transform: translate(var(--grid-radius-positive), -50%);
}

.form-grid-3x3 .form-wrap:nth-child(6) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(6) input[type="radio"]+label .label-icon {
  transform: translate(var(--grid-radius-negative), -50%);
}

.form-grid-3x3 .form-wrap:nth-child(7) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(7) input[type="radio"]+label .label-icon {
  transform: translate(var(--grid-radius-positive), var(--grid-radius-negative));
}

.form-grid-3x3 .form-wrap:nth-child(8) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(8) input[type="radio"]+label .label-icon {
  transform: translate(-50%, var(--grid-radius-negative));
}

.form-grid-3x3 .form-wrap:nth-child(9) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(9) input[type="radio"]+label .label-icon {
  transform: translate(var(--grid-radius-negative), var(--grid-radius-negative));
}
